<template>
	<c-base-page :current="1" :navText="'工单详情'">
		<view class="order-details">
			<uni-card class="detail-cards">
				<view class="detail-item">
					<view class="title">标题:</view>
					<view class="desc">{{ detailData.title || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">内容:</view>
					<view class="desc">{{ detailData.content || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">时间:</view>
					<view class="desc">{{ detailData.time || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">负责人:</view>
					<view class="desc">{{ detailData.principal || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">状态:</view>
					<view class="desc">{{ detailData.status === 1 ? "进行中" : "已完成" }}</view>
				</view>
				<view class="buttons">
					<button class="btn" type="primary" v-if="detailData.status === 1" @click="_complete()">去处理</button>
				</view>
			</uni-card>
		</view>
	</c-base-page>
</template>

<script>
	import moment from "moment"
	export default {
		data() {
			return {
				detailData: {
					id: 0
				}
			}
		},
		onLoad(options) {
			this.detailData.id = options && options.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				this.httpGet({
					url: this.$apis.apiGetWorkOrders
				}).then(res => {
					this.detailData = res.find(x => {
						return x.id == this.detailData.id
					})
					this.detailData.time = moment(this.detailData.time).format("YYYY-MM-DD HH:mm:ss")
				})
			},
			_complete(row) {
				let that = this
				uni.showModal({
					title: '提示',
					content: `您确定处理完成吗?`,
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.httpPost({
								url: `${that.$apis.apiGetWorkOrders}/${that.detailData.id}/complete`
							}).then(res => {
								that.getDetail()
								that.mxToast("已处理完成!")
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-details {
		padding-bottom: 180rpx;
	}
	.order-detail-tops {
		.titles {
			padding: 25rpx;
			.title {
				font-size: 50rpx;
				font-weight: bold;
			}
			.title.active {
				color: #55aaff;
			}
			.extra {
				font-size: 26rpx;
				color: #999;
				padding-top: 15rpx;
			}
		}
	}
	.section-title {
		margin: 20rpx 0 0 30rpx;
		padding-left: 12rpx;
		border-left: 5px solid #55aaff;
		font-size: 36rpx;
		height: 36rpx;
		line-height: 34rpx;
		font-weight: bold;
	}
	.detail-cards {
		.detail-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
			image {
				margin-right: 14rpx;
				width: 36rpx;
				height: 36rpx;
			}
			.title {
				font-weight: bold;
			}
			.desc {
				margin-left: 20rpx;
				flex: 1;
				color: #999;
				overflow: hidden;
				text-align: right;
				font-size: 26rpx;
			}
		}
		.show-more {
			margin: 20rpx 0;
			text-align: center;
		}
		.show-more image {
			width: 14rpx;
			height: 25.2rpx;
			margin: 6rpx 0 0 10rpx;
			transform: rotate(90deg);
		}
		.show-more.up image {
			transform: rotate(-90deg);
		}
	}
	.tabars {
		width: 100%;
		position: fixed;
		padding-top: 6rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-top: 1px solid #f5f5f5;
		.tab_btn {
			flex: 1;
			text-align: center;
			font-size: 26rpx;
		}
	}
	.buttons {
		.btn {
			margin: 60rpx auto;
			background-color: #00aaff;
		}
	}
</style>
